<template>
	<view class="full box relative index-wrap" :style="{'--height-value':statusBarHeightValue}">
		<view class="header-search">
			<view class="location-wrap">
				<image :src="sourceUrl +'/location.png'" class="location-icon"></image>
				<text class="location-value" @click="openMap">{{ currentCityName }}</text>
				<image src="/static/sanjiaoxing.png" class="arrow-icon active"></image>
				<picker :range="areaList" range-key="label" @change="areaChangeHandle">
					<text class="area-value">{{ activeArea.label }}</text>
				</picker>
				<image src="/static/sanjiaoxing.png" class="arrow-icon"></image>
			</view>
			<!-- <view class="search-wrap" @click="toSearch">
				<image :src="sourceUrl+'/search.png'" class="search-icon"></image>
				<text class="search-text">搜索</text>
			</view> -->
		</view>
		<view class="header-wrapper box w-100">
			<view class="mask-wrap absolute inset" @click="bannerClick">
				<swiper :current="swiperCurrent" @change="swiperChange" class="full" autoplay :interval="3000"
					disable-touch circular>
					<swiper-item class="full" v-for="(item,index) in bannerImage" :key="index">
						<image :src="item.image" class="mask-img full" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>

		</view>
		<view class="index-page-container" id="waterFull">
			<scroll-view class="full scroll-conn relative box " scroll-y @scrolltolower="loadMoreData">
				<view class="null-box" @click="bannerClick"></view>
				<view class="index-conn-wrapper-wwm ">
					<view class="index-conn-bg-wrap">
						<view class="main-wrap w-100">
							<view class="main-inner">
								<view class="main-title" @click="toSearch">
									<image :src="sourceUrl + '/location-blue.png'" class="blue-icon"></image>
									<text class="main-label">我想去</text>
									<text class="main-input flex-1">输入目的地</text>
								</view>
								<view class="main-line"></view>
								<view class="hot-address">
									<view class="hot-label">
										<text>热门目的地</text>
									</view>
									<view class="hot-list">
										<view class="hot-item">
											<text>西湖</text>
										</view>
										<view class="hot-item">
											<text>千岛湖</text>
										</view>
									</view>
								</view>
								<button open-type="contact" class="confirm-btn">
									<text>获取您的专属方案</text>
								</button>
								<view class="desc-list">
									<view class="desc-item" v-for="(item,index) in descList" :key="index">
										<image :src="item.icon" mode="aspectFill" class="desc-icon"></image>
										<text class="desc-text">{{ item.label }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="tab-wrap w-100">
							<view class="tab-list" id="tabList">
								<view class="tab-item" v-for="(item,index) in tabList" :key="index"
									:class="{active: item.value === activeTab}" @click="changeTab(item.value)">
									<text>{{ item.label }}</text>
								</view>
								<view class="tab-slide" :style="{'--left': tabRect[activeTab],'--duration':duration}">
								</view>
							</view>
						</view>
						<xl-list :areaId="activeArea.value" :cityId="userCityId" v-if="activeTab === 0" ref="listRef" />
						<line-list :areaId="activeArea.value" :cityId="userCityId" v-if="activeTab === 1"
							ref="listRef" />
						<shop-list :areaId="activeArea.value" :cityId="userCityId" v-if="activeTab === 2"
							ref="listRef" />
						<article-list ref="listRef" :areaId="activeArea.value" :cityId="userCityId"
							v-if="activeTab === 3" />
					</view>
				</view>
				<!-- <view class="list-wrap bg-white" style="height: 2000rpx;"></view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getAreaList
	} from '@/commonFunc/common.js'
	import {
		mapGetters
	} from 'vuex'
	import XlList from './com/xl-list.vue'
	import XzList from './com/xz-list.vue'
	import ShopList from './com/shop-list.vue'
	import LineList from './com/line-list.vue'
	import FoodsList from './com/foods-list.vue'
	import ArticleList from './com/article-list.vue'
	import {
		CITY_ID
	} from '../../constant'
	let timerID = null
	export default {
		data() {
			return {
				activeTab: 0,
				tabRect: [0, 0, 0, 0, 0],
				duration: 1,
				loading: true,
				userCityId: '',
				currentCityName: '',
				eventName: 'changeCitySuccess',
				areaList: [],
				areaIndex: 0,
				swiperCurrent: 0,
			}
		},
		created() {
			const {
				cityId
			} = this
			if (cityId) this.userCityId = cityId || 934
		},
		computed: {
			...mapGetters(['city', 'cityId', 'hasLogin', 'shouldUpdate', 'loginSuccess', 'hasLocation', 'location',
				'bannerImage'
			]),
			activeArea() {
				const target = this.areaList[this.areaIndex]
				return target || {
					label: '区/县级',
					value: 0
				}
			},
			statusBarHeightValue() {
				let height = uni.upx2px(88) + 'px'
				// #ifndef H5
				height = this.statusBarHeight_
				// #endif
				return height
			},
			tabList() {
				return [{
						label: '推荐乡邻',
						value: 0
					}, {
						label: '特色线路',
						value: 1
					},
					// { label: '小众地点', value: 2 },
					{
						label: '民宿酒店',
						value: 2
					}, {
						label: '地方好物',
						value: 3
					},
				]
			},
			descList() {
				const {
					sourceUrl
				} = this
				return [{
					label: '专属定制',
					icon: sourceUrl + '/pencil.png',
				}, {
					label: 'vip服务',
					icon: sourceUrl + '/vip.png',
				}, {
					label: '7x24h客服',
					icon: sourceUrl + '/clock.png',
				}, {
					label: '价格透明',
					icon: sourceUrl + '/price.png',
				}]
			},
		},
		async onShow() {
			this.getLocation()
			// if (this.shouldUpdate) {
			// 	this.$store.commit('location/setUpdate', false)
			// 	const [error, resp] = await this.$store.dispatch('location/getAddress')
			// }
		},
		async onLoad(ev) {
			uni.$on(this.eventName, this.changeCitySuccess)
			// if (this.hasLogin) {
			// 	const resp = await this.$store.dispatch('location/getAddress')
			// 	console.log(resp, 'resp');
			// }
		},
		onUnload() {
			uni.$off(this.eventName, this.changeCitySuccess)
		},
		onReady() {
			this.initRect()
		},
		methods: {
			swiperChange(ev) {
				this.swiperCurrent = ev.detail.current
			},
			bannerClick() {
				const target = this.bannerImage[this.swiperCurrent]
				if (!target) return
				if (!target.id) return
				if (timerID) {
					clearTimeout(timerID)
					timerID = null
				}
				timerID = setTimeout(() => {
					uni.navigateTo({
						url: `/pages-bundle/article-detail/index?id=${target.id}`
					})
				}, 300)
			},
			updateChildCom() {
				const refTarget = this.$refs.listRef
				if (!refTarget) return
				refTarget?.initData(true)
			},
			async areaChangeHandle(ev) {
				const {
					value
				} = ev.detail
				this.areaIndex = value * 1
				await this.$delay(1)
				this.updateChildCom()
			},
			async initArea(city_id) {
				this.areaList = await getAreaList(city_id)
			},
			changeCitySuccess(city) {
				const {
					id,
					name
				} = city
				this.currentCityName = name
				this.userCityId = id
				this.$store.commit('location/addRecentlyData', {
					id,
					name
				})
				this.initArea(id)
				this.areaIndex = 0
				setTimeout(() => this.updateChildCom())
				// console.log('changeCity', city);

			},
			async openMap() {
				const {
					currentCityName,
					eventName
				} = this
				uni.navigateTo({
					url: `/pages-bundle/city-list/city-list?current=${currentCityName}&event=${eventName}`
				})
				return
				// const { lat, lng } = this.location
				// uni.chooseLocation({
				// 	latitude: lat,
				// 	longitude: lng,
				// 	success: async ev => {
				// 		const { latitude, longitude } = ev
				// 		await this.$store.dispatch('location/getAddress', {
				// 			lng: longitude,
				// 			lat: latitude
				// 		})
				// 		console.log(this.cityId, 'cityId')
				// 	}
				// })
			},
			loadMoreData() {
				const refTarget = this.$refs.listRef
				if (!refTarget) return
				refTarget?.initData(false)
			},
			async getLocation() {
				if (this.hasLocation) return
				const resp = await this.$store.dispatch('location/getAddress')
				console.log(resp, 'getLocationResp');
				const {
					city,
					cityId
				} = this
				this.currentCityName = city
				this.userCityId = cityId
				this.$store.commit('location/addRecentlyData', {
					id: cityId,
					name: city
				})
				this.initArea(cityId)
			},
			changeTab(v) {
				if (this.activeTab === v) return
				// if (v === 3) return uni.switchTab({
				// 	url: '/pages/more/more'
				// })
				this.duration = Math.abs(v - this.activeTab)
				this.loading = true
				this.activeTab = v
			},
			loadingHandle(v) {
				this.loading = v
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages-bundle/search/search'
				})
			},
			initRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.select('#tabList').boundingClientRect()
				selector.select('#tabList .tab-slide').boundingClientRect()
				selector.selectAll('#tabList .tab-item').boundingClientRect()
				selector.exec(rect => {
					const [tabList, tabSlide, items] = rect
					const {
						left: tabLeft
					} = tabList
					const {
						width: slideWidth
					} = tabSlide
					const result = items.map(item => {
						item.left = item.left - tabLeft
						return item.left + (item.width / 2) - (slideWidth / 2)
					})
					this.tabRect = result
					selector = null
				})
			},

		},
		components: {
			XlList,
			XzList,
			ShopList,
			LineList,
			FoodsList,
			ArticleList
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';
</style>